<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<link rel="stylesheet" href="__PUBLIC__/mobile/jquery.mobile-1.4.5.min.css">
	<link rel="stylesheet" href="__PUBLIC__/styles/home.css">
	<script src="__PUBLIC__/scripts/jquery.min.js"></script>
	<script src="__PUBLIC__/mobile/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
	<div data-role="page">
		<link rel="stylesheet" href="__PUBLIC__/styles/swiper-3.3.0.min.css">
		<link rel="stylesheet" href="__PUBLIC__/styles/easy-responsive-tabs.css">
		<include file="Common:toolbar" title="图书信息"/>
		<include file="Common:menu" />

		<!--  start main  -->
		<main data-role="main" class="ui-content">
			
			<!-- begin swiper -->
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<a href=""><img src="__ROOT__/Uploads/{$book.location}" alt=""></a>
					</div>
					<div class="swiper-slide">
						<a href=""><img src="__ROOT__/Uploads/{$book.location}" alt=""></a>
					</div>
					<div class="swiper-slide">
						<a href=""><img src="__ROOT__/Uploads/{$book.location}" alt=""></a>
					</div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div><!-- // end swiper -->

			<div class="book-title">《{$book.name}》</div>
			<div class="price-box" id="price-box">
				<p>销售价：<span class="color-red font-solid">￥{$book.price_now}</span></p>
				<p>市场价：<span class="color-red font-solid"><del>￥{$book.price}</del></span></p>
				<p>邮费：￥0</p>
			</div>
			<form method="post" action="{:U('Home/Main/buy')}" >
			<div class="number-box">
				<span>数量：</span>
				<a id="sub" href="javascript:void(0)">-</a>
				<input id="book-number" class="number-input" type="text" data-role="none" value="1"  name="book-number" readonly>
				<a id="add" href="javascript:void(0)" >+</a>
				<span class="inventory">(库存<span id="book-total">{$book.total_count}</span>件)</span>
			</div>
			<div class="btn-box">
				<button  type="submit" class="ui-btn ui-btn-inline">立即购买</button>
				<button  class="ui-btn ui-btn-inline" id="add-cart">加入购物车</button>
			</div>
			<input type="hidden" id="book-id" name="book-id"  value="{$book.id}" />
			</form>

			 <div class="tabs" id="parentHorizontalTab">
				<ul class="resp-tabs-list hor_1">
					<li>详情</li>
					<li>评价</li>
				</ul>
				<div class="resp-tabs-container hor_1">
					<div class="description">
						<p>{$book.description}</p>
					</div>
					<div>
						<p>暂无评价</p>
					</div>
				</div>
        			</div>
		</main> <!-- // end main-->

		<script src="__PUBLIC__/scripts/easyResponsiveTabs.js"></script>
		<script src="__PUBLIC__/scripts/swiper-3.3.0.jquery.min.js"></script>
		<script src="__PUBLIC__/scripts/toast.js"></script>
		<script>
			  $(document).ready(function() {

			  	$("#add").click(function() {
			  	 	var value = $("#book-number").val();
			  	 	var total = parseInt($("#book-total").html());
			  	 	if (value < total) {
			  	 		value ++;
			  	 		$("#book-number").val(value);
			  	 	}
			  	});

				$("#sub").click(function() {
			  		var value = $("#book-number").val();
			  		if (value >  1) {
			  			value--;
			  			$("#book-number").val(value);
			  		}
			 	 });

				
				$("#add-cart").click(function() {
					
					$.post('/Home/Main/addCart.html',
						{ 
							'bookId':  $("#book-id").val(), 
						   	'bookNum': $("#book-number").val()
						},
						function(text, status) {
							if (status === "success") {
								new Toast({
    								context: $('#price-box'), 
    								message: '添加购物车成功'
    							}).show();
							} else {
								new Toast({
    								context: $('#price-box'), 
    								message: '网络问题，添加购物车失败'
    							}).show();
							}
							
						});
				});


				//Horizontal Tab
				$('#parentHorizontalTab').easyResponsiveTabs({
					type: 'default', //Types: default, vertical, accordion
					width: 'auto', //auto or any width like 600px
					fit: false, // 100% fit in a container
					tabidentify: 'hor_1', // The tab groups identifier
					activate: function(event) { 
					}
				});

				// Swiper
				 var mySwiper = new Swiper ('.swiper-container', {
				    direction: 'horizontal',
				    loop: true,
				    // 如果需要分页器
				    pagination: '.swiper-pagination',
				 });
			  });

			
		</script>
	</div>

</body>